<!DOCTYPE HTML>
<html>
<head>
    <title>商品列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link rel="stylesheet" href="weui.css"/>
    <link rel="stylesheet" href="example.css"/>
    <link rel="stylesheet" href=""/>
    <style>
        .timeDown-box {
            position: relative;
            width:100%;
            height: 100px;
            background: url(https://img-blog.csdnimg.cn/20210523211517294.png#pic_center);
        }
        .text2 {
            padding-left: 20px;
            padding-top: 5px;
            font-size: 20px;
            font-weight: 1000;
            color: white;
        }
        .text1 {
            padding-right: 200px;
            padding-top: 5px;
            font-size: 20px;
            font-weight: 1000;
            color: white;
        }
        #box1,#box2,#box3{
            position: relative;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: black;
            padding: 5px;
            margin-left: 18px;
            margin-top: 5px;
            color: white;
            text-align: center;
            font-size: 20px;
        }
        i {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: white;
            left: 48px;
        }
    </style>
    <title>秒杀页面</title>
</head>
<body>
<script src="jquery.min.js"></script>

<div class="container">
    <div class="page__bd" style="height: 500px;">
        <div class="weui-tab">
            <div class="weui-navbar">
                <div class="weui-navbar__item weui-bar__item_on">
                    商品
                </div>
                <div class="weui-navbar__item">
                    详情
                </div>
                <div class="weui-navbar__item">
                    评价
                </div>
            </div>
            <div class="weui-tab__panel" >
                <img class="weui-media-box__thumb" src="/seckill/seckill-goods/static/img/xiaomi.jpg" height="470px">
            </div>
        </div>
    </div>

    <div class="container" style="top: 400px;">
        <div class="timeDown-box">
            <div class="seckill_data">
                <div>
                    <span class="text2">秒杀开始时间:2021-6-25 19:21:30</span>
                </div>
                <div>
                    <span class="text2">秒杀结束时间:2021-6-26 19:02:33</span>
                </div>
                <div class="seckillStatus">
                    <span class="text2">秒杀倒计时:</span>
                    <span id="countDown" class="remainSeconds">132</span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <div id = "timer"></div>
    </div>
    <div class="container">
        <div class="weui-panel" style="top: 500px;">
            <div class="weui-panel__hd" id="title">华为 麦芒5 全网通 4GB+64GB版 香槟金 移动联通电信4G手机 双卡双待<span style="color: red;float: right" class="price1">￥666</span></div>
        </div>
    </div>
    <div class="container">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel">

                </div>
                <div class="weui-tabbar">
                    <div class="weui-tabbar__item">
                        <div style="display: inline-block; position: relative;">
                            <img src="https://img2.baidu.com/it/u=2889025562,3274689988&fm=26&fmt=auto&gp=0.jpg" alt="" class="weui-tabbar__icon">
                            <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
                        </div>
                        <p class="weui-tabbar__label">店铺</p>
                    </div>
                    <div class="weui-tabbar__item">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F32%2F22%2F90573b6b63cf747.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626662386&t=01bfd25b1ce88dbf43036f9d2422adfa" alt="" class="weui-tabbar__icon">
                        <p class="weui-tabbar__label">客服</p>
                    </div>
                    <div class="weui-tabbar__item">
                        <div style="display: inline-block; position: relative;">
                            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1107663396,132106820&fm=26&gp=0.jpg" alt="" class="weui-tabbar__icon">
                            <span class="weui-badge weui-badge_dot" style="position: absolute; top: 0; right: -6px;"></span>
                        </div>
                        <p class="weui-tabbar__label">购物车</p>
                    </div>
                    <div class="weui-tabbar__item">
                        <button  class="weui-btn weui-btn_primary" id="buyButton" onclick="miaosha(3234250,666)">立即秒杀</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(function(){
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });
    function miaosha(skuId,price) {
        let token = localStorage.getItem("token");
        $.ajax({
            type: 'get',
            url: 'http://localhost:9502/tb-stock/seckill',
            data: {skuId:skuId,seckillPrice:price,token:token},
            success: function (data) {
                console.log(data);
                localStorage.setItem("orderId",data);

                order();

                console.log(data)
            }
        })
    }

    $(function () {
        countDown();
    });

    function countDown() {
        var id= location.search.replace(/[^\d]/g, "");



        $.ajax({
            type:'get',
            url:'http://localhost:9501/seckill/getByid',
            data:{skuId:id},
            success: function (data) {
                console.log(data)
                let times = data.times;
                let status = data.status;
                var timeout;
                console.log(times);
                $(".remainSeconds").html(times+"秒");
                if(times > 0){//秒杀还没开始
                    $("#buyButton").attr("disabled", true);
                    timeout = setTimeout(function () {
                        countDown();
                    }, 1000);
                } else if(times == 0){//秒杀进行中
                    $("#buyButton").attr("disabled", false);
                    if (timeout) {
                        console.log(timeout+'ssss')
                        clearTimeout(timeout);
                    }
                    $(".s2").append("秒杀进行中");
                }else{//秒杀已经结束
                    $("#buyButton").attr("disabled", true);
                    $(".s3").append("秒杀已结束");
                }
            }
        })
    }

    function order(){
        let orderId = localStorage.getItem("orderId");
        var id= location.search.replace(/[^\d]/g, "");
        var i=0;
        $.ajax({
            type:'get',
            url:'http://localhost:9502/tb-stock/getorderid',
            data:{orderId:orderId},
            success: function (data) {
                console.log(data)
                if(data==1){
                    i++;
                    if(i==1){
                        console.log("排队")
                        alert("排队中")
                        order();
                    }else{
                        console.log("排队")
                        order();
                    }
                }else if(data==2){
                    console.log("跳转")
                    if(confirm("是否跳转")){
                        window.location.href='order.html?skuId='+id;
                    }
                }
            }
        })

    }

</script>


</body>
</html>
